<!--
 * @Author: wangze@linkstec.com
 * @Date: 2022-02-17 14:32:27
 * @Function: Please Input Function
-->
<template>
  <el-radio-group v-model="value" size="small" class="tab-wrap" @change="change">
    <el-radio-button
      :label="tab[replaceFields.value]"
      v-for="(tab) in tabList"
      :key="tab[replaceFields.value]"
      :disabled="tab[replaceFields.disabled]"
      :style="{width: buttonWidthSting}">{{ tab[replaceFields.label] }}</el-radio-button>
  </el-radio-group>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
export default {
  name: 'TabsButtonGroup',
  props: {
     value: {
      type: [String, Number],
      default: 0
    },
    tabList: {
      type: Array,
      default: function () {
        return [];
      }
    },
    replaceFields: {
      type: Object,
      default: function () {
        return {
          value: 'value', label: 'label', disabled: 'disabled'
        };
      }
    },
    buttonWidth: {
      type: [String, Number],
      default: 'auto'
    }
  },
  // 定义属性
  data () {
    return {
      activeIndex: this.value
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    buttonWidthSting () {
      if (isNaN(Number(this.buttonWidth))) {
        return this.buttonWidth;
      } else {
        return Number(this.buttonWidth) + 'px';
      }
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    change (value) {
      this.$emit('input', value);
      this.$emit('change', value);
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>

.tab-wrap{
  ::v-deep .el-radio-button--small .el-radio-button__inner{
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    font-size: 13px;
  }
  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner{
    background-color: #EAF1FF;
    color: $--color-primary;
  }
}
</style>
